<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<script src="Assets/Source/mootools.js" type="text/javascript" charset="utf-8"></script>
		<script src="Source/Event/Event.Clickout.js" type="text/javascript" charset="utf-8"></script>
		<script src="Source/Meio/Meio.Cache.js" type="text/javascript" charset="utf-8"></script>
		<script src="Source/Meio/Meio.Place.js" type="text/javascript" charset="utf-8"></script>
		<script src="Source/Meio/Meio.Datepicker.js" type="text/javascript" charset="utf-8"></script>
		
		<title>meio-datepicker</title>
		
		<link rel="stylesheet" href="Assets/Styles/meio.datepicker.css" type="text/css" charset="utf-8" />
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			.geral{
				padding:100px;
			}
		</style>

	</head>
	<body>
		
		<div class="geral">
			<table cellpadding="0">
				<tr>
					<th style="width: 100px">Example 1</th>
					<td><input id="example1" name="date" value="05/03/2009" type="text" style="width: 160px;" maxlength="10" /></td>
					
				</tr>
				<tr>
					<th style="width: 100px">Example 2</th>
					<td><input id="example2" name="date" value="05/03/2009" type="text" style="width: 160px;" maxlength="10" /></td>
				</tr>
				<tr>
					<th style="width: 100px">Example 2</th>
					<td><div id="exmple"></div></td>
				</tr>
			</table>
		</div>
		<script type="text/javascript">
			new meio.DatePicker('example1', {sendOptions: {firstWeekDay: 0}, alignOptions: {attach: 'right', align: 'top', offsets: {y: -20}}});
			//new meio.DatePicker('exmple');
		</script>
	</body>
</html>